<template>
  <div class="category">
    <h3 class="text">标题</h3>
    <slot :names="newItems"></slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category2",
  data() {
    return {
      foods: ['米饭', '火锅', '麻辣烫', '串串'],
      games: ['lol', '吃鸡', '手游', '问道'],
      films: ['喜羊羊与灰太狼', '第一滴血', '穿越火线', '斗破苍穹'],
      newItems: [1, 2, 3, 4]
    }
  }
}
</script>

<style scoped>
.category {
  background: skyblue;
  width: 200px;
  height: 300px;
}

.text {
  text-align: center;
  background: orange;
}
</style>
